<template>
  <div class="search">
    <!-- 搜索顶部 -->
    <div class="search_top">
      <div class="back" @click="backBookmall">
        <span class="icon"><i class="iconfont icon-zuojiantou"></i></span>
      </div>
      <div class="search_box">
        <input type="text" placeholder="请输入关键字" v-model="keyWord" />
        <span class="delkeyword" v-show="keyWord" @click="keyWord=''"> <i class="iconfont icon-closel"></i></span>
      </div>
      <div class="search_click" @click="getSearchResFun">搜索</div>
    </div>
    <!-- 搜索中 -->
    <div class="loading" v-if="loadingTwo" style="position:relative;">
      <van-loading size="24px" vertical>搜索中...</van-loading>
    </div>
    <!-- 热门搜索 -->
    <div class="hot_search" v-if="searchView">
      <div class="title">热门推荐</div>

      <!-- 热门搜索加载中 -->
      <div class="loading" v-if="loadingOne">
        <van-loading size="24px" vertical>加载中...</van-loading>
      </div>
      <div class="search_content" v-if="!loadingOne">
        <p
          :class="{ front: index == 1 || index == 2 || index == 0 }"
          v-for="(item, index) in hotWords"
          :key="index"
          @click="getHotSearchFun(item.name)"
        >
          {{ index + 1 }} {{ item.name }}
        </p>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="search_history" v-if="searchView">
      <!-- 标题 -->
      <div class="title">
        搜索历史
        <span class="del_history" @click="delHistory">
          <i class="iconfont icon-shanchu"></i>
        </span>
      </div>
      <!-- 历史内容 -->
      <div class="his_content">
        <div
          class="text"
          v-for="(item, index) in history"
          :key="index"
          @click="getHotSearchFun(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="result" v-if="searchRes">
      <searchres :searchBooks="searchBooks" />
    </div>
  </div>
</template>

<script>
// 引入vuex中的方法
import { mapState } from "vuex";
import { getHotWords, getSearchResult } from "../../api/search";
import searchres from "./searchres.vue";
import { Toast } from "vant";
export default {
  components: { searchres },
  name: "search",
  data() {
    return {
      hotWords: [
        "逆天邪神",
        "斗破苍穹",
        "剑来",
        "择天记",
        "雪中悍刀行",
        "将夜",
        "大道朝天",
        "大主宰",
        "傻逼斗罗大陆",
        "狗都不看的小说",
      ],
      keyWord: "", //搜索关键词
      loadingOne: true, //默认为加载中
      loadingTwo: false, //结果是否出现
      searchView: true, //推荐搜索和历史是否出现
      searchRes: false, //搜索详情是否出现
      searchBooks: [], //搜索的书籍
    };
  },
  methods: {
    // 获取热搜词语方法
    getHotWordsFun() {
      getHotWords().then((res) => {
        console.log(res);
        if (res) {
          let list = [];

          res.list.forEach((item) => {
            let { id, name } = item;
            list.unshift({
              id,
              name,
            });
          });
          this.hotWords = list;
          this.loadingOne = false;
        }
      });
    },
    // 开始搜索
    starSearch() {
      // 加载中出现
      this.loadingTwo = true;
      this.searchRes = false;
      this.searchView = false;
      getSearchResult({ search: this.keyWord }).then((res) => {
        this.searchBooks = res.words;
        this.searchRes = true;
        this.loadingTwo = false;
      });
    },
    // 获取搜索结果的方法
    getSearchResFun() {
      if (!this.keyWord) {
        Toast("请输入关键词");
      } else {
        // 搜索逻辑
        this.starSearch();
        // 添加历史记录
        this.addHistory(this.keyWord);
      }
    },
    // 点击热搜关键词搜索
    getHotSearchFun(key) {
      this.keyWord = key;
      // 开始搜索
      this.starSearch();
      // 添加历史记录
      this.addHistory(this.keyWord);
    },
    // 点击历史记录搜索
    getHistorySearchFun(key) {
      this.keyWord = key;

      this.starSearch();

      // 添加历史记录
      this.addHistory(this.keyWord);
    },
    // 加入搜索记录
    addHistory(key) {
      this.$store.commit("addHistory", key);
    },
    // 删除历史记录
    delHistory() {
      this.$store.commit("delHistory");
    },
    // 返回上一层
    backBookmall() {
      this.$router.back();
      this.keyWord = "";
    },
  },
  created() {
    // 获取热搜词语
    this.getHotWordsFun();
  },
  watch: {
    keyWord() {
      if (this.keyWord == "") {
        this.searchView = true;
        this.searchRes = false;
        this.loadingTwo = false;
      }
    },
  },
  computed: {
    // vuex中存储历史记录
    ...mapState({
      history: (state) => state.history, //使用ES6的箭头函数来给count赋值
    }),
  },
};
</script>

<style lang="less">
.search {
  width: 100%;
  height: 100%;
  background-color: #fff;
  //搜索顶部
  .search_top {
    position: sticky;
    top: 0;
    height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    background-color: #52b594;
    border-bottom: 10px solid #f7f7f7;
    color: #fff;
    .back {
      flex: 0 0 30px;
      padding-left: 10px;
    }
    .search_box {
      flex: 1;
      position: relative;
      .delkeyword {
        font-size: 12px;
        position: absolute;
        margin: auto;
        right: 16px;
        top: 5px;
        i{
           color: #cccdcf;
        }
      }
      input {
        height: 28px;
        width: 98%;
        outline: none;
        border: none;
        border-radius: 16px;
        text-indent: 30px;
        color: #444444;
        font-size: 12px;
      }
      ::-webkit-input-placeholder {
        font-size: 12px;
        color: #cccdcf;
      }
    }
    .search_click {
      flex: 0 0 42px;
      text-align: center;
      font-size: 15px;
    }
  }

  //   推荐搜索
  .hot_search {
    background-color: #fff;
    padding: 0 14px;
    border-bottom: 10px solid #f7f7f7;
    // 标题
    .title {
      height: 35px;
      line-height: 35px;
      font-size: 15px;
      font-weight: 550;
      position: relative;
      &::before {
        content: "";
        display: block;
        height: 17px;
        width: 2px;
        background-color: #000;
        position: absolute;
        margin: auto;
        left: -6px;
        top: 0;
        bottom: 0;
      }
    }
    // 内容
    .search_content {
      padding-top: 5px;
      display: flex;
      flex-wrap: wrap;
      p {
        flex: 0 0 50%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        // 不换行，溢出之后点点点
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .front {
        color: #e1cdac;
      }
    }
  }
  // 搜索历史
  .search_history {
    padding: 0 12px;
    // 标题
    .title {
      height: 35px;
      line-height: 35px;
      font-size: 15px;
      font-weight: 550;
      position: relative;
      margin-bottom: 10px;
      &::before {
        content: "";
        display: block;
        height: 17px;
        width: 2px;
        background-color: #000;
        position: absolute;
        margin: auto;
        left: -6px;
        top: 0;
        bottom: 0;
      }
      .del_history {
        position: absolute;
        right: 14px;
      }
    }
    .his_content {
      div {
        display: inline-block;
        font-size: 12px;
        color: #444444;
        padding: 3px 4px;
        border-radius: 2px;
        margin: 4px;
        background-color: #f1f1f1;
      }
    }
  }
}
</style>